<!--
 * @Author: weikang
 * @Description:
 * @Date: 2024-01-03 22:10:46
 * @LastEditTime: 2024-02-26 16:01:40
 * @FilePath: \env-manager-pc\src\views\document\device\detail\model\caijiqi.vue
-->
<script setup lang="ts">
import dayjs from 'dayjs'
import type { DveiceVersion } from './page'
import documentApi from '@/api/modules/document'

const { deviceId } = defineProps({
  deviceId: {
    type: String,
    default: '',
  },
})

const formData = reactive<DveiceVersion>({
  SoftVer: '',
  SoftDate: '',
  HardVer: '',
  HardDate: '',
})

function GetVersion() {
  documentApi.DeviceGetVersion({
    deviceObjID: deviceId,
  }).then((res) => {
    formData.SoftVer = res.SoftVer
    formData.SoftDate = dayjs(res.HardVer).format('YYYY-MM-DD')
    formData.HardVer = res.HardVer
    formData.HardDate = dayjs(res.HardDate).format('YYYY-MM-DD')
  }, (err) => {
    console.error(err)
  })
}

GetVersion()

const loading = ref(false)
function CallData() {
  loading.value = true
  documentApi.DeviceCallVersion({
    deviceObjID: deviceId,
  }).then((res) => {
    formData.SoftVer = res.SoftVer
    formData.SoftDate = dayjs(res.HardVer).format('YYYY-MM-DD')
    formData.HardVer = res.HardVer
    formData.HardDate = dayjs(res.HardDate).format('YYYY-MM-DD')
    loading.value = false
  }, (err) => {
    loading.value = false
    console.error(err)
  })
}
</script>

<template>
  <div>
    <el-card class="box-card" shadow="never">
      <template #header>
        <div class="card-header">
          <span>版本</span>
          <el-button type="primary" link :loading="loading" @click="CallData">
            召测
          </el-button>
        </div>
      </template>
      <el-form v-loading="loading" label-width="120px" label-suffix="：">
        <el-row>
          <el-col :span="12">
            <el-form-item label="软件版本">
              <el-input v-model="formData.SoftVer" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="软件日期">
              <el-date-picker v-model="formData.SoftDate" class="w-full!" value-format="YYYYMMDD" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="硬件版本">
              <el-input v-model="formData.HardVer" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="硬件日期">
              <el-date-picker v-model="formData.HardDate" class="w-full!" value-format="YYYYMMDD" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
  </div>
</template>

<style lang="scss" scoped>
.card-header {
  --at-apply: flex flex-justify-between;
}
</style>
